<script>
import Carousel3d from '@/views/interestingComponents/carousel3d/carousel-3d.vue'
import Slide from '@/views/interestingComponents/carousel3d/slide.vue'

export default {
  components: {
    Carousel3d,
    Slide,
  },
  data() {
    return {
      lists: [
        {
          title: '1',
        },
        {
          title: '2',
        },
        {
          title: '3',
        },
        {
          title: '4',
        },
        {
          title: '5',
        },
        {
          title: '6',
        },
      ],
      direction: 'left',
      directionOptions: [
        {
          label: '左',
          value: 'left',
        },
        {
          label: '右',
          value: 'right',
        },
      ],
      vertical: false,
    }
  },
  computed: {
    getWidth() {
      return this.vertical ? 200 : 60
    },
    getHeight() {
      return this.vertical ? 60 : 200
    },
  },
}
</script>

<template>
  <div flex="~ col">
    <n-flex align="center">
      <n-switch v-model:value="vertical" :round="false">
        <template #checked>
          垂直
        </template>
        <template #unchecked>
          平行
        </template>
      </n-switch>
      <n-select
        v-if="vertical" v-model:value="direction" :options="directionOptions" placeholder="" size="small" w="60px"
      />
    </n-flex>

    <div flex="~ 1" items="center">
      <div class="carousel-3d-wrapper">
        <Carousel3d
          :border="0"
          :direction="direction"
          :display="5"
          :height="getHeight"
          :inverse-scaling="0"
          :perspective="0"
          :space="80"
          :vertical="vertical"
          :width="getWidth"
          autoplay
        >
          <Slide v-for="(item, i) in lists" :key="i" :index="i">
            <div class="carouselTitle">
              {{ item.title }}
            </div>
          </Slide>
        </Carousel3d>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.carousel-3d-wrapper {
  height: 100%;
  width: 100%;
}

.carousel-3d-container {
  display: flex;
  align-items: center;
  margin: 0;
  height: 100% !important;
}
</style>
